<template>
  <div class="evaluate_con">
    <!-- 基本信息 -->
    <div class="user" v-if="activeUser && activeUser.userName">
      <!-- 头像 -->
      <div class="user_head">
        <el-avatar
          slot="reference"
          class="user-icon"
          :src="activeUser.headUrl"
          size="medium"
          v-if="activeUser.headUrl"></el-avatar>
        <el-avatar
          slot="reference"
          class="user-icon"
          :src="activeUser.gender === '2' ? circleUrlW : circleUrlM"
          size="medium"
          v-else></el-avatar>
      </div>
      <div class="user_info">
        <div class="name">{{ activeUser.userName }}</div>
        <div class="post">
          <div class="post_name">部门：{{ activeUser.orgName }}</div>
          <!-- <div class="post_name" v-if="activeUser.postName">职级：{{ activeUser.postName }}</div> -->
        </div>
      </div>
    </div>
    <!-- 保密提示 -->
    <div class="confidentiality_tips">温馨提示：本季度可评“好”等次{{ goodNum }}人, 已评{{ chooseGoodNum }}人.</div>
    <!-- el-scrollbar -->
    <div class="con">
      <div class="con_box">
        <!-- 未提交 -->
        <!-- 季度总结展示 -->
        <div class="summary" v-if="!scoreShow">
          <template v-if="activeUser.status == 0">
            <empty class="empty-box">
              <slot>暂未提交</slot>
            </empty>
            <div class="opers">
              <div class="btn warn_appra" @click="warnPerson(1)" v-if="activeUser.isUrge == '1'">催报</div>
              <div class="btn info_appra" v-else>已催报</div>
            </div>
          </template>

          <template v-if="activeUser.status == 1">
            <template v-if="!queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')">
              <!-- 纪实展示 -->
              <QuarterlySummary :activeUser="activeUser" />
              <div class="opers">
                <!-- 未评价 -->
                <template>
                  <div class="btn goback_btn" @click="goBackDocumentary" v-if="activeUser.isReturn === '1'">
                    退回修改
                  </div>
                  <div class="btn evaluate_btn" @click="setScoreType">领导评价</div>
                </template>
              </div>
            </template>
          </template>
        </div>
        <!-- 季度评价 -->
        <div class="evaluate" v-if="activeUser.status == 2 || scoreShow">
          <EvaluateScore
            :activeUser="activeUser"
            @setScoreType="setScoreType"
            :isGood="isGood"
            :goodNum="goodNum"
            v-bind="$attrs" />
        </div>
      </div>
    </div>

    <XnDialog custom-class="branch_dialog" title="退回" :visible.sync="returnShow" @close="returnShow = false">
      <el-input
        placeholder="请输入退回原因"
        type="textarea"
        v-model="returnCon"
        size="small"
        :rows="8"
        maxlength="128"
        show-word-limit></el-input>
      <div class="dialog-box_bottom">
        <el-button size="small" @click="returnShow = false">取 消</el-button>
        <el-button type="primary" size="small" @click="setData">确定</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import QuarterlySummary from './QuarterlySummary.vue'
import EvaluateScore from './EvaluateScore.vue'
import { mapMutations } from 'vuex'
import XnDialog from '@com/xnDialog.vue'
import { saveReturn } from '@apis/board.js'

export default {
  name: 'EvaluateCon',
  components: { QuarterlySummary, EvaluateScore, XnDialog },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    rollListAll: {
      type: Array,
      default: () => {
        return []
      },
    },
    goodNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 是否显示评分
      scoreShow: false,
      // 返回修改弹框
      returnShow: false,
      returnCon: '',
      queryRouter: {},
      chooseGoodNum: 0,
      isGood: true, // 是否还有可以评定为好的比例
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  computed: {},
  watch: {
    activeUser() {
      if (this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')) {
        // 主要凌达评价
        if ([1, 2, 3].includes(this.activeUser.status)) {
          this.scoreShow = true
        } else {
          this.scoreShow = false
        }
      } else {
        // 分管领导评价
        if ([2, 3].includes(this.activeUser.status)) {
          this.scoreShow = true
        } else {
          this.scoreShow = false
        }
      }
      console.log('this.scoreShow :>> ', this.activeUser)
    },
    rollListAll: {
      handler(news) {
        const arr = news.filter(item => {
          return item.assessRank === '1'
        })
        this.chooseGoodNum = arr.length
        if (this.chooseGoodNum < this.goodNum) {
          this.isGood = true
        } else {
          this.isGood = false
        }
      },
      deep: true,
      immediate: true,
    },
    goodNum: {
      handler(news) {
        if (this.chooseGoodNum < news) {
          this.isGood = true
        } else {
          this.isGood = false
        }
      },
    },
  },
  created() {
    this.queryRouter = this.$route.query
  },
  mounted() {},
  methods: {
    ...mapMutations('evaluation', ['setChangeUserID']),
    // 设置打分是否显示
    setScoreType() {
      this.scoreShow = !this.scoreShow
      this.$emit('quarterlySummaryChange', this.scoreShow)
    },
    // 纪实退回
    goBackDocumentary() {
      this.returnShow = true
    },

    setData() {
      if (this.returnCon.trim().length === 0) {
        this.$message.warning('请填写修改意见')
        return
      }
      // 季度总结退回
      saveReturn({
        noteId: this.activeUser.noteId,
        optionUserId: localStorage.pskh_userId,
        replayContent: this.returnCon,
        tenantId: localStorage.pskh_tenantId,
        suggestionList: [],
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '退回成功',
            type: 'success',
          })
          this.returnCon = ''
          this.returnShow = false
          this.setChangeUserID(this.activeUser.userId)
          this.$emit('pageint')
        }
      })
    },
    // 催报
    warnPerson(type) {
      this.$emit('warnPerson', type)
    },
  },
}
</script>

<style lang="scss" scoped>
.evaluate_con {
  flex: 1;
  width: 0;
  height: 100%;
  padding-right: 2px;
  // 用户信息
  .user {
    height: 80px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    background-color: #e9eff48f;
    .user_head {
      margin-right: 20px;
      width: 45px;
      height: 45px;
      /deep/.user-icon {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
        }
      }
    }
    .user_info {
      margin-left: 20px;
      .name {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .post {
        display: flex;
        margin-top: 6px;
        .post_name {
          margin-right: 50px;
        }
      }
    }
  }
  // 保密提示
  .confidentiality_tips {
    height: 40px;
    line-height: 40px;
    background-color: #e9eff48f;
    color: #a30014;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
  }
  .con {
    height: calc(100% - 120px);
    .con_box {
      height: 100%;
      width: 100%;
      padding: 20px;

      .opers {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
          padding: 0 28px;
          height: 40px;
          color: #fff;
          font-size: 16px;
          cursor: pointer;
          margin-left: 20px;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          &.goback_btn {
            background-color: #fe6b6e;
          }
          &.evaluate_btn {
            background-color: #1852a3;
            box-shadow: inset 0px -2px 0px 0px rgba(21, 63, 123, 0.4);
          }
          &.warn_appra {
            background-color: #f59a23;
            margin-top: 20px;
            margin-left: 0;
          }
          &.info_appra {
            background-color: #c7bebe;
            cursor: no-drop;
            margin-top: 20px;
            margin-left: 0;
          }
        }
      }
      .summary,
      .evaluate {
        height: 100%;
      }
      .summary {
        .empty-box {
          height: 65%;
          // width: 50% !important;
        }
      }
    }
  }
}
.dialog-box_bottom {
  margin-top: 30px;
  text-align: center;
}
</style>
